<template>
  <div class="data-card">
    <div class="bar-dom" ref="bar-dom"></div>
  </div>
</template>

<script>
//周报更新情况
import echarts from "echarts";
export default {
  data() {
    return {
      barInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLineChar();
    });
  },
  methods: {
    drawLineChar() {
      let chart_dom = this.$refs["bar-dom"];
      this.barInstance = echarts.init(chart_dom);
      let baseOpt = {
        color: ["#67D5B5", "#EE7785"],
        legend: {
          top: 14,
          right: 20,
          itemWidth: 12,
          itemHeight: 12,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 50,
          left: 60,
          bottom: 60,
          right: 20,
        },
        xAxis: {
          data: ["第一周", "第二周", "第三周", "第四周"],
          axisLabel: {
            rotate: 20,
            color: "#666666",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            color: "#666666",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "及时更新",
            type: "bar",
            barWidth: 24,
            label: {
              show: true,
              position: "top", // 顶部显示
              formatter: "{c}", // 显示数据值
              textStyle: {
                fontSize: 14, // 调整文本大小
                color: "#333333", // 调整文本颜色
              },
            },
            data: [80, 60, 40, 50],
          },
          {
            name: "未及时更新",
            type: "bar",
            barWidth: 24,
            label: {
              show: true,
              position: "top", // 顶部显示
              formatter: "{c}", // 显示数据值
              textStyle: {
                fontSize: 14, // 调整文本大小
                color: "#333333", // 调整文本颜色
              },
            },
            data: [40, 50, 20, 85],
          },
        ],
      };
      this.barInstance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        this.barInstance.resize();
      });
    },
  },
  destroyed() {
    this.barInstance && this.barInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-card {
  height: 100%;
  width: 100%;
  .bar-dom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
